<template>
  <view class="containar">
    <view class="avatarUrl">
      <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
        <image :src="userInfo.avatarUrl" mode="aspectFill" class="refreshIcon"></image>
      </button>
    </view>
    <view class="nickname">
      <text>昵称：</text>
      <input type="nickname" class="weui-input" :value="userInfo.nickName" @blur="bindblur" placeholder="请输入昵称"
             @input="bindinput"/>
    </view>

    <view class="btn">
      <view class="btn-sub" @click="onSubmit">登陆</view>
    </view>
  </view>
</template>

<script lang="ts">
// @ts-nocheck
import Vue from 'vue';
import {checkLogin, setNickNva} from "../../api/common/login";
import {UploadImgLocal} from "../../utils/upload";

export default Vue.extend({
  data() {
    return {
      userInfo: {
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        nickName: ''
      },
      fileList: [], //上传图片
    };
  },
  onLoad(option) {
    checkLogin().then()
  },
  methods: {
    getFileUrl(url: string) {
      console.log('getFileUrl', url)
      this.userInfo.avatarUrl = url
    },
    bindblur(e: any) {
      // 获取微信昵称
      console.log('nickName', e)
      this.userInfo.nickName = e.detail.value;
    },
    bindinput(e: any) {
      console.log('nickName', e)
      //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
      this.userInfo.nickName = e.detail.value;
    },
    onChooseavatar(e: any) {
      console.log('看看这个方法',this.getFileUrl)
      UploadImgLocal(this.getFileUrl, e.detail.avatarUrl)
    },
    async onSubmit() {
      console.log("昵称，头像：", this.userInfo)
      if (this.userInfo.nickName === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入昵称'
        })
        return false;
      }
      if (this.userInfo.avatarUrl === '') {
        uni.showToast({
          icon: 'none',
          title: '请上传头像'
        })
        return false;
      }
      const params = {
        nickname: this.userInfo.nickName,
        avatar: this.userInfo.avatarUrl
      };
      const a = await setNickNva(params)
      setTimeout(function () {
        uni.navigateBack()
      }, 800)
    },
  }
});
</script>
<style lang="scss">
.containar {
  .avatarUrl {
    padding: 80rpx 0 40rpx;
    background: #fff;

    button {
      background: #fff;
      line-height: 80rpx;
      height: auto;
      width: auto;
      padding: 20rpx 30rpx;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;


      .refreshIcon {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }

      .jt {
        width: 14rpx;
        height: 28rpx;
      }
    }
  }

  // botton 去除边框
  button::after {
    border: none;
  }

  .nickname {
    background: #fff;
    padding: 20rpx 30rpx 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .weui-input {
      padding-left: 60rpx;
    }
  }

  .btn {
    width: 100%;

    .btn-sub {
      width: 670rpx;
      margin: 80rpx auto 0;
      height: 90rpx;
      background: #1A6FFD;
      border-radius: 45rpx;
      line-height: 90rpx;
      text-align: center;
      font-size: 36rpx;
      color: #fff;
    }
  }
}
</style>
